<template>
  <div id="userUpdatePage">
    <h2 style="margin-bottom: 16px">个人信息</h2>
    {{ loginUser }}
    1
    {{ picture }}
    2
    {{userDetail}}

    <!-- 个人信息表单 -->
    <PictureUpload
      class="picture-upload"
      :picture="picture"
      :onSuccess="onSuccess"
      :uploadAvatar="true"
    />
    <a-form name="userDetail" layout="vertical" :model="userDetail" @finish="handleSubmit">
      <a-form-item name="userName" label="用户名">
        <a-input v-model:value="userDetail.userName" placeholder="请输入名称" allow-clear />
      </a-form-item>
      <a-form-item name="userAvatar" label="头像">
        <a-image alt="fuck" :src="userDetail.userAvatar" style="height: 80px; object-fit: cover" />
        <br />
        <a-button type="link" style="margin-top: 10px" @click="">更换头像</a-button>
      </a-form-item>
      <a-form-item name="userProfile" label="简介">
        <a-textarea
          v-model:value="userDetail.userProfile"
          placeholder="请输入简介"
          :auto-size="{ minRows: 2, maxRows: 5 }"
          allow-clear
        />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" html-type="submit" style="width: 100%">提交修改</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import PictureUpload from '@/components/PictureUpload.vue'
import {computed, onMounted, reactive, ref, watchEffect} from 'vue'
import { message } from 'ant-design-vue'
import {
  editPictureUsingPost,
} from '@/api/pictureController.ts'
import { useRoute, useRouter } from 'vue-router'
import { useLoginUserStore } from '@/stores/useLoginUserStore.ts'
import {updateUserUsingPost} from "@/api/userController.ts";

const picture = ref<API.PictureVO>()
const userDetail = ref<API.UserUpdateRequest>({
  id: '',
  userName: '',
  userAvatar: '',
  userProfile: '',
})

const loginUserStore = useLoginUserStore()

const loginUser = loginUserStore.loginUser
/**
 * 图片上传成功
 * @param newPicture
 */
const onSuccess = (newPicture: API.PictureVO) => {
  picture.value = newPicture
}

const router = useRouter()

/**
 * 提交表单
 * @param values
 */
const handleSubmit = async (values: any) => {
  console.log(values)
  const userId = userDetail.value.id
  if (!userId) {
    return
  }
  const res = await updateUserUsingPost({
    id: userId,
    ...values,
  })
  // 操作成功
  if (res.data.code === 0 && res.data.data) {
    message.success('修改成功')
    loginUserStore.fetchLoginUser()
    // 跳转到首页
    router.push({
      path: `/`,
    })
  } else {
    message.error('创建失败，' + res.data.message)
  }
}

const route = useRoute()

const fetchData = () => {
  picture.value = {
    id: '',
    url: loginUser.userAvatar,
  }
  userDetail.value = {
    id: loginUser.id,
    userName: loginUser.userName,
    userAvatar: loginUser.userAvatar,
    userProfile: loginUser.userProfile,
  }
}

onMounted(() => {
  fetchData()
})

watchEffect(() => {
  if(picture.value?.url){
    userDetail.value.userAvatar = picture.value.url
  }
})
</script>

<style scoped>
#userUpdatePage {
  max-width: 720px;
  margin: 0 auto;
}

.picture-upload :deep(.ant-upload) {
  width: 100% !important;
  height: 100% !important;
  min-height: 52px;
  min-width: 52px;
  max-width: 100px;
  max-height: 100px;
}
</style>
<style></style>
